<!--
 * @Author: your name
 * @Date: 2021-03-28 14:45:19
 * @LastEditTime: 2021-04-01 09:08:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template-master\src\views\product\Attr\List.vue
-->
<template>
  <div>
    <el-card>
      <CartgroyList @halderCartList='halderCartList'
                    :isShow='isShow'></CartgroyList>
    </el-card>
    <el-card style="margin-top:20px">

      <!-- table展示区 -->
      <div v-show="isShow">
        <!-- 添加属性按钮 -->
        <el-button type="primary"
                   icon="el-icon-plus"
                   @click="addAttrDiv"
                   :disabled='!cartgroy3Id'>添加属性</el-button>
        <el-table :data="attrList"
                  style="width: 100%"
                  border>
          <el-table-column prop="prop"
                           label="序号"
                           type="index"
                           width="80">
          </el-table-column>
          <el-table-column prop="attrName"
                           label="属性名称"
                           width="150">
          </el-table-column>
          <el-table-column prop="prop"
                           label="属性值列表"
                           width="width">
            <template slot-scope="{row,$index}">
              <el-tag type="success"
                      v-for="attrVal in row.attrValueList"
                      :key="attrVal.id">{{attrVal.valueName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="prop"
                           label="操作"
                           width="150">
            <template slot-scope="{row,$index}">
              <HintButton type="warning"
                          icon="el-icon-edit"
                          title="修改"
                          size="mini"
                          @click="updataAttr(row)"></HintButton>

              <el-popconfirm :title="`你确定删除${row.attrName}吗?`"
                             @onConfirm='deleteAttr(row)'>
                <HintButton type="danger"
                            slot="reference"
                            icon="el-icon-delete"
                            title="删除"
                            size="mini"
                            style="margin-left:10px"></HintButton>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加属性 -->
      <div v-show="!isShow">
        <el-form :inline="true"
                 :model="attrFrom">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名"
                      v-model="attrFrom.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   icon="el-icon-plus"
                   :disabled='!attrFrom.attrName'
                   @click="addAttr">添加属性值</el-button>
        <el-button @click="isShow = true">取消</el-button>
        <el-table style="width: 100%;margin:20px 0"
                  border
                  :data="attrFrom.attrValueList">
          <el-table-column prop="prop"
                           type="index"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="valueName"
                           label="属性值名称"
                           width="width">
            <template slot-scope="{row,$index}">
              <el-input placeholder="请输入属性值名称"
                        :ref="$index"
                        v-model="row.valueName"
                        v-if="row.isEdit"
                        @blur="toLook(row)"
                        @keyup.enter.native="toLook(row)"
                        size="mini"></el-input>
              <span v-else
                    @click="toEdit(row,$index)"
                    style="display:block;width:100%">{{row.valueName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop"
                           label="操作"
                           width="width">
            <template slot-scope="{row,$index}">
              <el-popconfirm :title="`你确定删除${attrFrom.attrName}吗?`"
                             @onConfirm='attrFrom.attrValueList.splice($index,1)'>
                <HintButton type="danger"
                            title="删除属性值"
                            slot="reference"
                            size="mini"
                            icon="el-icon-delete"></HintButton>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary"
                   @click="saveAttrList">保存</el-button>
        <el-button @click="isShow = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'AttrList',
  data () {
    return {
      cartgroy1Id: '',
      cartgroy2Id: '',
      cartgroy3Id: '',
      attrList: [],
      isShow: true,
      attrFrom: {
        attrName: "",
        attrValueList: [],
        categoryLevel: 0,
        categoryLevel: 0,
      },
    }
  },
  methods: {
    halderCartList ({ cartgroyId, level }) {
      if (level === 1) {
        this.cartgroy2Id = ''
        this.cartgroy3Id = ''
        this.attrList = []
        this.cartgroy1Id = cartgroyId
      } else if (level === 2) {
        this.cartgroy3Id = ''
        this.attrList = []
        this.cartgroy2Id = cartgroyId
      } else {
        this.cartgroy3Id = cartgroyId
        this.getAttrList()
      }
    },
    async getAttrList () {
      const result = await this.$API.attr.attrInfoList(this.cartgroy1Id, this.cartgroy2Id, this.cartgroy3Id)
      if (result.code === 200 || result.code === 20000) {
        this.attrList = result.data
      }
    },
    //点击添加属性值
    addAttrDiv () {
      this.isShow = false
      this, this.attrFrom = {
        attrName: "",
        attrValueList: [
        ],
        categoryLevel: 3,
        categoryId: this.cartgroy3Id,
      }
    },
    //点击添加属性值创造一个空对象占位
    addAttr () {
      this.attrFrom.attrValueList.push({
        attrId: this.attrFrom.id,
        valueName: "",
        isEdit: true
      }),
        this.$nextTick(() => {
          this.$refs[this.attrFrom.attrValueList.length - 1].focus()
        })

    },
    //点击修改属性值
    updataAttr (row) {
      this.isShow = false
      this.attrFrom = cloneDeep(row)
      this.attrFrom.attrValueList.forEach((item) => {
        this.$set(item, 'isEdit', false)
      })
    },
    //点击从span切换到input
    toEdit (row, index) {
      row.isEdit = true,
        this.$nextTick(() => {
          this.$refs[index].focus()
        })
    },
    //失去焦点或者点击回车让input变成span
    toLook (row) {
      let valName = row.valueName
      if (valName.trim() === '') {
        row.valueName = ''
        return
      }
      let isRow = this.attrFrom.attrValueList.some((item) => {
        if (item !== row) {
          return item.valueName === row.valueName
        }
      })
      if (isRow) {
        this.$message.info('输入的属性值存在同名')
        row.valueName = ''
        return
      }
      row.isEdit = false
    },
    //保存
    async saveAttrList () {
      let attrInfo = this.attrFrom
      attrInfo.attrValueList = attrInfo.attrValueList.filter((item) => {
        if (item.valueName !== '') {
          delete item.isEdit
          return true
        }
      })
      if (attrInfo.attrValueList.length === 0) {
        this.$message.error('属性值不能为空')
        return
      }
      try {
        await this.$API.attr.saveAttrInfo(attrInfo)
        this.$message.success('保存成功')
        this.isShow = true
        this.getAttrList()
      } catch (error) {
        this.$message.error('保存失败')
      }
    },
    //删除
    async deleteAttr (row) {
      try {
        const result = await this.$API.attr.deleteAttr(row.id)
        if (result.code === 200 || result.code === 20000) {
          this.$message.success('删除成功')
          this.getAttrList()
        }
      } catch (error) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>

